<template>
	<view class="content-class">
		<view class="content-top">
			<span>{{tip}}</span>
			<u-image height="180px" mode="aspectFit" :src="card"></u-image>
		</view>
		<view class="content-center">
			<u-line direction="col" dashed></u-line>
			<u-image height="391px" mode="aspectFit" :src="head"></u-image>
		</view>
		<view class="bottom-btn">
			<view class="sport-btn" @click="skipPage">去拍照</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tip: '参照物为标准卡片，手掌尽量张开',
				card: require('../../static/images/measuring/zwcl-card.png'),
				head: require('../../static/images/measuring/zwcl-head.png'),
			};
		},
		methods: {
			skipPage() {
				uni.navigateTo({
					url: "/pages/Html/Html?pageConfig=" + JSON.stringify({
						page: 'Camera',
						name: '指围拍照',
					})
				})
			}
		},
	};
</script>
<style>
	page {
		display: flex;
		flex-direction: column;
		height: 100%;
	}
</style>
<style scoped lang="scss">
	.content-class {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 15px 15px;
		height: 100%;

		.content-top {
			position: relative;

			span {
				font-size: 16px;
				position: absolute;
				top: 40px;
				left: 50%;
				transform: translateX(-50%);
				z-index: 999;
				white-space: nowrap;
			}
		}

		.content-center {
			position: relative;
			flex: 1;
			margin-bottom: 75px;
			margin-top: 10px;
			display: flex;
			justify-content: center;
			align-items: center;

			.u-line {
				position: absolute;
				left: calc(50% - 5px);
				transform: translateX(-50%);
				z-index: 1;
			}
		}
	}
</style>